<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button onclick="add()">添加</button>
		<button id="delete">删除</button>
		<table border="1">
			<thead>
				<tr>
					<th colspan="2">大类</th>
					<th>小类</th>
					<th>件数</th>
					<th>单位</th>
					<th>描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			
			let arr = [
				{type1:"肉类",type2:"猪肉",count:1,unit:"猪",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:2,unit:"猪",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:3,unit:"猪",desc:"无"}
			]
			
			let table = document.getElementsByTagName("table")[0];
			let tbody = table.getElementsByTagName("tbody")[0];
			update();
			
			function add(){
				clear();
				arr.push({type1:"肉类",type2:"猪肉",count:1,unit:"猪",desc:"无"});
				
			}
			
			function clear(){
				let trs = tbody.children;
				for(let index in trs){
					tbody.remove(trs[index])
				}
				
				tbody = document.createElement("tbody");
				table.appendChild(tbody);
			}
			
			function update(){
				for(let index in arr){
					
					let item = arr[index];
					let tr = document.createElement("tr");
					tbody.appendChild(tr);
					
					let td = document.createElement("td");
					td.innerHTML = `<input type='checkbox' value = "${index}" />`;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.type1;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.type2;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.count;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.unit;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerText = item.desc;
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerHTML = `
						<button>编辑</button>
						<button onclick = "del(${index})">删除</button>
						`;
					tr.appendChild(td);
						}
				}
				
				function del(index){
					console.log(index);
					arr.splice(index,1);
					clear();
					update();		
			}
			
				
				
			$(function() {
				// console.log($("input:checked"));
				// console.log($("input[type='checkbox']")[0]);
				$("button[id='delete']").click(function() {
					 console.log($("input:checked"));
					let arry = [];
					$("input:checked").each(function(index,item) {
						
						// console.log(arr[item.value].splice(0,1));
						// console.log(this);
						// console.log(item);
						// console.log(item.value);
						// arr.splice(item.value , 1);
						arry.push(item.value);
						// console.log(arr);
					})
					for(let index in arry){
						// console.log(arry.length-index-1);
						// console.log(arry);
						// console.log(arry[arry.length-index-1]);
						arr.splice(arry[arry.length-index-1], 1);
					}
						clear();
						update();
				})
			})
		</script>
	</body>
</html>